<template>
  <div class="order-page">

    <!-- 订单列表 -->
    <van-list @load="onLoad">
      <div v-for="item in orderList" :key="item.orderId" class="custom-card">
        <div class="card-header">
          <h3>订单信息</h3>
        </div>
        <div class="card-content">
          <p><span class="label">起点:</span> {{ item.startLocation }}</p>
          <p><span class="label">终点:</span> {{ item.endLocation }}</p>
          <p><span class="label">订单时间:</span> {{ formatTimestamp(item.orderTime) }}</p>
        </div>
        <div class="card-footer">
          <button class="view-detail-btn" @click="showOrderDetail(item)">查看详情</button>
        </div>
      </div>
    </van-list>

    <!-- 无数据提示 -->
    <van-empty v-if="orderList.length === 0 && !loading" description="暂无订单记录" />

    <!-- 订单详情对话框 -->
    <van-popup v-model:show="detailDialogVisible" position="bottom" style="height: 80%">
      <div class="order-detail">
        <h3>订单详情</h3>
        <img src="../assets/car.png" alt="" class="responsive-car-img">
        <p><strong>订单编号:</strong> {{ orderDetail.orderId }}</p>
        <p><strong>订单创建时间:</strong> {{ formatTimestamp(orderDetail.orderTime) }}</p>
        <p><strong>订单用户:</strong> {{ orderDetail.userName }}</p>
        <p><strong>订单司机:</strong> {{ orderDetail.driverName }}</p>
        <p><strong>起点位置:</strong> {{ orderDetail.startLocation }}</p>
        <p><strong>终点位置:</strong> {{ orderDetail.endLocation }}</p>
        <p><strong>行驶距离（km）:</strong> {{ orderDetail.distance }}</p>
        <p><strong>行驶时长（min）:</strong> {{ orderDetail.duration }}</p>
        <p><strong>订单费用（元）:</strong> {{ orderDetail.fee }}</p>
        <p><strong>车牌号码:</strong> {{ orderDetail.vehiclePlate }}</p>
        <p><strong>车辆型号:</strong> {{ orderDetail.vehicleModel }}</p>
        <p><strong>车辆类型:</strong> {{ orderDetail.vehicleType }}</p>
        <button @click="detailDialogVisible = false">关闭</button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { OrderDetailControllerService } from '../../api/services/OrderDetailControllerService';
import { formatTimestamp } from '../util/TimeUtil.js';

const orderList = ref([]);
const username = localStorage.getItem('username');
const loading = ref(false);
const detailDialogVisible = ref(false);
const orderDetail = ref({});

onMounted(() => {
  loadOrderList();
});
const onLoad = async () => {
  loading.value = true;
  try {
    const res = await OrderDetailControllerService.getOrderByPage(username, 1, 1000);
    orderList.value = res.data;
  } catch (error) {
    console.error('加载订单数据失败:', error);
  } finally {
    loading.value = false;
  }
};

const loadOrderList = async () => {
  orderList.value = [];
  await onLoad();
};

const showOrderDetail = async (row) => {
  try {
    const res = await OrderDetailControllerService.getOrderById(row.orderId);
    if (res.code === 0) {
      orderDetail.value = res.data;
      detailDialogVisible.value = true;
    } else {
      console.error('获取订单详情失败:', res.msg || '未知错误');
    }
  } catch (error) {
    console.error('获取订单详情失败:', error);
  }
};

</script>

<style lang="scss" scoped>
.order-page {
  padding: 1rem;
  background-color: #f5f5f5; // 设置页面背景色
}


.van-cell {
  padding: 1rem;
  font-size: 0.9rem;
}

.van-empty {
  margin-top: 2rem;
}

.van-popup {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.order-detail {
  padding: 1.5rem;
}

.order-detail h3 {
  color: #333;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.order-detail p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.order-detail button {
  width: 100%;
  margin-top: 1rem;
  padding: 0.8rem;
  background-color: #ffaa00;
  color: white;
  border: none;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.order-detail button:hover {
  background-color: #ffaa00;
}

.custom-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: translateY(-5px);
  }
}

.card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eee;
}

.card-header h3 {
  color: #333;
  font-size: 1.25rem;
  margin: 0;
}

.card-content {
  padding: 1.5rem;
}

.card-content p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.card-content .label {
  font-weight: bold;
  color: #444;
  margin-right: 0.5rem;
}

.card-footer {
  padding: 0 1.5rem 1.5rem;
  text-align: right;
}

.view-detail-btn {
  background-color: #ffaa00;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s;

  &:hover {
    background-color: #ffaa00;
  }
}

.responsive-car-img {
  // 让图片宽度最大为容器宽度
  max-width: 100%;
  // 保持图片的宽高比
  height: auto;
  // 让图片居中显示
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>